<template>
    <div class="index-lists">
      <el-card class="!border-none" shadow="never">
        <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
          <el-form-item label="赛事名称" prop="name">
            <el-input class="w-[280px]" v-model="queryParams.name" placeholder="请输入赛事名称"/>
          </el-form-item>
          <el-form-item label="赛事地点" prop="address">
            <el-input class="w-[280px]" v-model="queryParams.address" placeholder="请输入赛事地点"/>
          </el-form-item>
          <el-form-item label="比赛方式" prop="playType">
            <el-select v-model="queryParams.playType" style="width: 191px" placeholder="请选择比赛方式" clearable>
              <el-option label="男单打" value="1" />
              <el-option label="女单打" value="2" />
              <el-option label="男双打" value="3" />
              <el-option label="女双打" value="4" />
              <el-option label="男女混打" value="5" />
            </el-select>
          </el-form-item>
          <el-form-item label="赛事赛程" prop="schedule">
            <el-select v-model="queryParams.schedule" style="width: 191px" placeholder="请选择赛事赛程" clearable>
              <el-option label="初赛" value="1" />
              <el-option label="半决赛" value="2" />
              <el-option label="总决赛" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="队伍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" prop="teamName">
            <el-input class="w-[280px]" v-model="queryParams.teamName" />
          </el-form-item>
          <el-form-item label="组织方&nbsp;&nbsp;&nbsp;" prop="orgParty" placeholder="请输入组织方">
            <el-input class="w-[280px]" v-model="queryParams.orgParty" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetPage">查询</el-button>
            <el-button @click="resetParams">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="!border-none mt-4" shadow="never">
        <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
          <el-table-column label="名称" prop="name" min-width="100" />
          <el-table-column label="地址场次" prop="name" min-width="150">
            <template #default="{ row }">
              {{row.address}}-{{row.addressName}}
              <el-tag v-if="row.schedule == 1">初赛</el-tag>
              <el-tag type="danger" v-else-if="row.schedule == 2">半决赛</el-tag>
              <el-tag type="danger" v-else-if="row.schedule == 3">总决赛</el-tag>
              第{{row.orderNum}}场
            </template>
          </el-table-column>
          <el-table-column label="时间" prop="startTime" min-width="150">
          </el-table-column>
          <el-table-column label="队伍" prop="playTeamName" min-width="130">
          </el-table-column>
          <el-table-column label="比赛方式" min-width="80">
            <template #default="{ row }">
              <el-tag type="primary" v-if="row.playType==1">男单打</el-tag>
              <el-tag type="warning" v-if="row.playType==2">女单打</el-tag>
              <el-tag type="success" v-if="row.playType==3">男双打</el-tag>
              <el-tag type="error" v-if="row.playType==4">女双打</el-tag>
              <el-tag type="danger" v-if="row.playType==5">男女混打</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="状态" prop="status" min-width="80">
            <template #default="{ row }">
              <el-tag v-if="row.status == 0">比赛中</el-tag>
              <el-tag type="success" v-else-if="row.status == 1">晋级</el-tag>
              <el-tag type="success" v-else-if="row.teamStatus == 1">胜利晋级</el-tag>
              <el-tag type="info" v-else-if="row.status == 3">结束</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="组织方" prop="orgParty" min-width="100" />
        </el-table>
        <div class="flex justify-end mt-4">
          <pagination v-model="pager" @change="getLists" />
        </div>
      </el-card>
    </div>
</template>
<script lang="ts" setup name="competition">
import {competitionScoreLists} from '@/api/competition'
const queryParams = reactive({
    name: '',
    address: '',
    playTime: '',
    playType: '',
    schedule: '',
    status: '',
    orgParty: '',
})

const { data: pager,refresh } = await useAsyncData(() => competitionScoreLists({
      page_no: 1,
      page_size: 15,
      ...queryParams
    }),
    {
      default: () => ({
        page: 1,
        size: 15,
        loading: false,
        count: 0,
        lists: [] as any[],
        extend: {} as Record<string, any>
      })
    })
const resetParams = async () => {
  const paramsInit: Record<any, any> = Object.assign(
      {},
      toRsaw(queryParams)
  )
  Object.keys(paramsInit).forEach((item) => {
    queryParams[item] = paramsInit[item]
  })
  resetPage()
}
const resetPage = async () => {
  pager.page = 1
  getLists()
}

const getLists = async () => {
  refresh()
}
</script>
